<template>
  <div class="app-container">
    <div class="content-wapper">
      <div class="content-main">
        <el-card class="info-card">
          <div slot="header" class="clearfix">
            <span>内容基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
              <span class="detail-tit">标题</span>
              {{ baseInfo.title }}
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">作者</span>
              {{ baseInfo.author.fullName }}
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">录入时间</span>
              {{ baseInfo.createdAt }}
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">更新时间</span>
              {{ baseInfo.updatedAt }}
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">权重</span>
              {{ baseInfo.weight }}
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">审核状态</span>
              {{ auditStatus ? auditStatus[baseInfo.auditStatus] : '' }}
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">文章状态</span>
              {{ baseInfo.onShelve ? '上架' : '下架' }}
            </el-col>
          </el-row>
          <el-row v-if="baseInfo.keywords && baseInfo.keywords.length" :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <span class="detail-tit">关键词</span>
              {{ Array.isArray(baseInfo.keywords) ? baseInfo.keywords.join("，") : baseInfo.keywords }}
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>视口预览</span>
          </div>
          <div>
            <el-tabs tab-position="left" style="height: 500px;">
              <el-tab-pane label="wap">
                <pre-view :type="type" :ids="ids" :view-type="'appView'" />
              </el-tab-pane>
              <el-tab-pane label="微信">
                <pre-view :type="type" :ids="ids" :view-type="'wechatView'" />
              </el-tab-pane>
              <el-tab-pane label="百度">
                <pre-view :type="type" :ids="ids" :view-type="'baiduView'" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>

      </div>
      <div class="content-tags">
        <tags :content-id="ids" :content-type="type" :tag-list="baseInfo.tags" />
      </div>
    </div>
  </div>
</template>
<script>
import { getDetail } from '@/api/content'
import tags from '@/components/common/Tag'
import PreView from '@/components/common/PreView'
export default {
  components: {
    tags,
    PreView
  },
  data() {
    return {
      loaded: false,
      loading: null,
      ids: '',
      type: '',
      typeName: '',
      baseInfo: {
        author: {},
        tags: []
      },
      biz: {
        PGC: '麻雀分发平台',
        CMS: '采编发系统',
        HM: '行家系统'
      }
    }
  },
  created() {
    this.ids = this.$route.params.id
    const { contentTypeObj } = this.$store.getters
    console.log('路由信息', contentTypeObj, this.$route.name)
    Object.keys(contentTypeObj).every(item => {
      if (~this.$route.name.indexOf(item)) {
        this.type = item
        this.typeName = contentTypeObj[item]
        return false
      }
      return true
    })
    console.log(this.type, this.typeName)
    this.getInfo(this.ids)
  },
  methods: {
    getInfo(id) {
      console.log()
      if (this.loaded) return
      const loading = this.$loading({
        text: '加载中...'
      })
      // console.log('loading', loading)
      getDetail(id, this.type).then(res => {
        this.loaded = false
        loading.close()
        console.log('输出详情页', res)
        if (res.id) {
          this.baseInfo = res
          if (Array.isArray(this.baseInfo.tags) && !this.baseInfo.tags.length) {
            this.hasTags = false
          } else {
            this.hasTags = true
          }
        } else {
          this.$message.error({
            message: '基本信息加载失败'
          })
          this.loaded = false
          loading.close()
        }
      }).catch(err => {
        console.log('err', err)
        this.$message.error({
          message: '基本信息加载失败'
        })
        this.loaded = false
        loading.close()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.info-card{
  margin-bottom: 30px;
}
</style>
